<template>
  <el-container>
    <el-header />

    <el-container>
      <el-aside>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          router
          unique-opened
        >
          <el-menu-item index="/">
            <el-icon :size="20">
              <HomeFilled />
            </el-icon>
          </el-menu-item>
          <el-menu-item index="/file-manager">
              <el-icon :size="20">
                <Files />
              </el-icon>
              <span>文件管理</span>
          </el-menu-item>
          <el-menu-item index="/teller-manager">
            <el-icon><Avatar /></el-icon>
            <template #title>渠道管理</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><Document /></el-icon>
            <template #title>导航三</template>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><Setting /></el-icon>
            <template #title>导航四</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  <el-footer />
</template>
<script>
import {
  HomeFilled,
  Files,
  Avatar,
  Document,
  Setting,
} from "@element-plus/icons-vue";


export default {
  components: { HomeFilled, Avatar, Files, Document, Setting },
  data() {
    return {
      title: "12312",
      isCollapse: true,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>


<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>